<template>
	<view class="kui-badge kui-relative">
		<view class="content kui-flex" :class="position ? `kui-absolute ${position}` : ''" :style="{
			backgroundColor: state.backgroundColor,
			backgroundImage: state.backgroundImage,
			padding: state.padding,
			borderRadius: `999px`,
			width: state.width,
			height: state.height,
		}" v-if="state.show">
			<!-- <kui-text :color="state.color" :size="`${state.fontSize}rpx`" v-if="!dot && !icon">{{ state.value }}</kui-text> -->
			<text :style="{
				color: state.color,
				fontSize: `${state.fontSize}rpx`
			}" v-if="!dot && !icon">{{ state.value }}</text>
			<view class="kui-relative" v-else>
				<kui-icons :color="state.color" :size="24" :type="icon"></kui-icons>
			</view>
		</view>
		<slot></slot>
	</view>
</template>

<script lang="ts">
	import {
		defineComponent,
		getCurrentInstance,
		SetupContext,
		reactive,
		watch
	} from 'vue';
	
	import BadgeProps from './props';
	
	const name = 'kui-badge';
	
	export default defineComponent({
		name,
		props: BadgeProps,
		setup(props, context: SetupContext) {
			const {
				proxy
			}: any = getCurrentInstance();
			const theme = proxy.$theme;
			
			const state = reactive({
				backgroundColor: '',
				backgroundImage: '',
				color: '',
				padding: '',
				fontSize: '',
				width: '',
				height: '',
				value: props.value ?? 0,
				maxShowPlus: false,
				show: props.show,
				mode: props.mode
			});
			
			const init = (steep: number = 0) => {
				state.fontSize = theme.size.fonts.sm;
				state.padding = '3rpx 10rpx';
				state.backgroundColor = props.type ? theme.colors[props.mode][props.type][5 + steep] : theme.colors[props.mode]['grey'][2 + steep];
				state.color = '#FFFFFF';
				// 自定义颜色徽标
				state.backgroundColor = props.color ? props.color : state.backgroundColor;
				
				// 渐变主题徽标
				if (props.type && props.gradient) {
					state.backgroundImage = `linear-gradient(to right, ${theme.colors[props.mode][props.type][5 + steep]}, ${theme.colors[props.mode][props.type][4+steep]})`;
				}
				
				// 圆点徽标
				if (props.dot) {
					state.width = '16rpx';
					state.height = '16rpx';
					state.padding = '';
				}
				
				// 处理最大值
				if (props.max > 0) {
					state.value = `${props.max}+`;
				}
			}
			
			init();
			
			uni.$on("changeMode", (e) => {
				const number = state.mode === 'light' ? 0 : 1;
				init(number);
			});
			
			watch(
				() => props.show,
				(newVal) => {
					console.log(newVal);
					state.show = newVal;
				}
			);
			
			return {
				state,
				init
			}
		}
	});
</script>

<style lang="less">
	.kui-badge {
		display: inline-block;
		// line-height: 1;
		font-size: 0;
		&-content {
			position: relative;
		}
	}
	.right-top {
		top: 0rpx;
		right: 0rpx;
		transform: translateY(-50%) translateX(50%);

	}
	.right-bottom  {
		bottom: 0rpx;
		right: 0rpx;
		transform: translateY(50%) translateX(50%);
	}
	.left-top {
		top: 0rpx;
		left: 0rpx;
		transform: translateY(-50%) translateX(-50%);
	}
	.left-bottom {
		bottom: 0rpx;
		left: 0rpx;
		transform: translateY(50%) translateX(-50%);
	}
</style>